<template>
    <div class="table-toolbar">
      <!-- 左侧工具栏 -->
      <div class="toolbar-left">
        <slot name="left">
          <!-- 批量操作按钮 -->
          <template v-if="batchActions && batchActions.length">
            <button
              v-for="action in batchActions"
              :key="action.key"
              class="toolbar-button"
              :disabled="!selectedRows.length"
              @click="() => handleBatchAction(action)"
            >
              {{ action.label }}
            </button>
          </template>
        </slot>
      </div>
  
      <!-- 右侧工具栏 -->
      <div class="toolbar-right">
        <slot name="right">
          <!-- 刷新按钮 -->
          <button
            v-if="showRefresh"
            class="toolbar-button"
            @click="$emit('refresh')"
          >
            刷新
          </button>
  
          <!-- 密度设置 -->
          <div v-if="showDensity" class="density-dropdown">
            <button class="toolbar-button" @click="showDensityOptions = !showDensityOptions">
              密度
            </button>
            <div v-if="showDensityOptions" class="density-options">
              <div
                v-for="option in densityOptions"
                :key="option.value"
                class="density-option"
                @click="handleDensityChange(option.value)"
              >
                {{ option.label }}
              </div>
            </div>
          </div>
  
          <!-- 列设置 -->
          <div v-if="showColumnSetting" class="column-setting-dropdown">
            <button class="toolbar-button" @click="showColumnOptions = !showColumnOptions">
              列设置
            </button>
            <div v-if="showColumnOptions" class="column-options">
              <div
                v-for="col in columns"
                :key="col.dataIndex"
                class="column-option"
              >
                <input
                  type="checkbox"
                  :checked="!hiddenColumns.includes(col.dataIndex)"
                  @change="toggleColumn(col.dataIndex)"
                >
                {{ col.title }}
              </div>
            </div>
          </div>
        </slot>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const props = defineProps({
    batchActions: {
      type: Array,
      default: () => []
    },
    selectedRows: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    showRefresh: {
      type: Boolean,
      default: true
    },
    showDensity: {
      type: Boolean,
      default: true
    },
    showColumnSetting: {
      type: Boolean,
      default: true
    }
  })
  
  const emit = defineEmits(['refresh', 'density-change', 'columns-change', 'batch-action'])
  
  // 密度设置
  const showDensityOptions = ref(false)
  const densityOptions = [
    { label: '紧凑', value: 'small' },
    { label: '默认', value: 'medium' },
    { label: '宽松', value: 'large' }
  ]
  
  // 列设置
  const showColumnOptions = ref(false)
  const hiddenColumns = ref([])
  
  // 处理密度变化
  const handleDensityChange = (density) => {
    emit('density-change', density)
    showDensityOptions.value = false
  }
  
  // 处理列显示/隐藏
  const toggleColumn = (columnKey) => {
    const index = hiddenColumns.value.indexOf(columnKey)
    if (index > -1) {
      hiddenColumns.value.splice(index, 1)
    } else {
      hiddenColumns.value.push(columnKey)
    }
    emit('columns-change', hiddenColumns.value)
  }
  
  // 处理批量操作
  const handleBatchAction = (action) => {
    emit('batch-action', {
      action: action.key,
      rows: props.selectedRows
    })
  }
  </script>
  
  <style scoped>
  .table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .toolbar-left,
  .toolbar-right {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .toolbar-button {
    padding: 4px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
  }
  
  .toolbar-button:hover {
    color: #1890ff;
    border-color: #1890ff;
  }
  
  .toolbar-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  /* 下拉菜单样式 */
  .density-dropdown,
  .column-setting-dropdown {
    position: relative;
  }
  
  .density-options,
  .column-options {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
  }
  
  .density-option,
  .column-option {
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
  }
  
  .density-option:hover,
  .column-option:hover {
    background: #f5f5f5;
  }
  
  .column-option {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  </style>